<template>
  <div class="zcgzh">
    <div class="zcgzh-a"></div>
    <div class="zcgzh-b">
      <div class="zcgzh-g">
        <div
          class="zcgzh-aa"
          :class="{ 'zcgzh-aaa': index === aIndex }"
          @click="getList2(item.name)"
          v-for="(item, index) in zclist"
          :key="index"
        >
          {{ item.name }}
        </div>
        <!-- <div class="zcgzh-g">
        <div
          class="zcgzh-aa"
          :class="{ 'zcgzh-aaa': index === aIndex }"
          @click="getList1(item, index)"
          v-for="(item, index) in zclist"
          :key="index"
        >
          {{ item.name }}
        </div> -->
        <!-- <div
          class="zcgzh-aa"
          :class="{ 'zcgzh-aaa': item.name === aItem }"
          @click="getList1(item, index)"
          v-for="(item, index) in zclist"
          :key="index"
        >
          {{ item.name }}
        </div> -->
      </div>
      <div class="zcgzh-d">
        <div class="zcgzh-ddd" v-for="(item, index) in list" :key="index">
          <img src="" alt="" class="zcgzh-dddd" />
          <div class="zcgzh-dd">{{ item.name1 }}</div>
        </div>
      </div>

      <!-- </div>
    <div class="zcgzh-b">
      <div class="zcgzh-g">
        <div
          class="zcgzh-aa"
          :class="{ 'zcgzh-aaa': index === aIndex }"
          v-for="(item, index) in zclist"
          :key="index"
          @click="getlist(item, index)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="zcgzh-d">
        <div class="zcgzh-ddd" v-for="(item, index) in list" :key="index">
     
          <div class="zcgzh-dd">{{ item.name1 }}</div>
        </div
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      aItem: "科技创新",
      list: [],
      zclist: [
        {
          name: "科技创新",
          content: [
            {
              name1: "  关于实施科技创新企业首贷贴息政策的通知  ",
            },
            {
              name1:
                "  国家金融监督管理总局关于加强科技型企业全生命周期金融服务的通知  ",
            },
            {
              name1:
                "  市政府办公室印发关于推进全市科技保险支持产业创新集群发展的若干措施...通知 ",
            },
          ],
        },
        {
          name: "乡村振兴",
          content: [
            {
              name1: "  关于实施科技  ",
            },
            {
              name1:
                "  国家金融监督管理总局关于加强科技型企业全生命周期金融服务的通知  ",
            },
            {
              name1:
                "  市政府办公室印发关于推进全市科技保险支持产业创新集群发展的若干措施...通知 ",
            },
          ],
        },
        {
          name: "制造业转型",
          content: [
            {
              name1: "  关于实施科技创新企业首贷贴息政策的通知  ",
            },
            {
              name1: "  国家金融监督管理总 ",
            },
            {
              name1:
                "  市政府办公室印发关于推进全市科技保险支持产业创新集群发展的若干措施...通知 ",
            },
          ],
        },
        {
          name: "文化产业",
          content: [
            {
              name1: "  关于实施科技创新企业首贷贴息政策的通知  ",
            },
            {
              name1:
                "  国家金融监督管理总局关于加强科技型企业全生命周期金融服务的通知  ",
            },
            {
              name1: "  市政府办公室印发施...通知 ",
            },
          ],
        },
      ],

      aIndex: 0,
      // zclist: [
      //   {
      //     name: "科技创新",
      //   },
      //   {
      //     name: "乡村振兴",
      //   },
      //   {
      //     name: "制造业转型",
      //   },
      //   {
      //     name: "文化产业",
      //   },
      // ],
      // list: [],
      zc1list: [
        {
          name1: "  关于实施科技创新企业首贷贴息政策的通知  ",
        },
        {
          name1:
            "  国家金融监督管理总局关于加强科技型企业全生命周期金融服务的通知  ",
        },
        {
          name1:
            "  市政府办公室印发关于推进全市科技保险支持产业创新集群发展的若干措施...通知 ",
        },
      ],
      zc2list: [
        {
          name1: " 政策的通知  ",
        },
        {
          name1: "  金融服务的通知  ",
        },
        {
          name1: " 发展的若干措施...通知 ",
        },
      ],
      zc3list: [
        {
          name1: "  关于实施科技创新企业  ",
        },
        {
          name1: "  国家金融监督管理总  ",
        },
        {
          name1: "  市政府办公室印发关于推进全市科技 ",
        },
      ],
      zc4list: [
        {
          name1: "  关于实施新企业  ",
        },
        {
          name1: "  国家金融总  ",
        },
        {
          name1: "  市政府办公室全市科技 ",
        },
      ],
    };
  },

  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {
    this.list = this.zc1list;
    // this.changeColor();
  },
  mounted() {},
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    getList(aa, qq) {
      console.log(aa, 5565555555);
      // this.aIndex = qq
      this.list = aa.content;
      console.log(this.list, "list");
    },

    // getList1(aa) {
    //   this.aItem = aa.name;
    //   this.list = aa.content;
    // },
    // getList1(bb, aa) {
    //   this.aIndex = aa;
    //   this.list = this.zclist[aa].content;
    // },

    // 寻找数组的某一项

    getList2(neirong) {
      const one = this.zclist.find((a) => {
        if (a.name === neirong) {
          return true;
        } else {
          return false;
        }
      });
      this.list = one.content
    },

    // getList(aa,qq){
    //   console.log(aa, 5565555555);
    //   this.aIndex = qq
    // //  this.list=aa.content
    //  console.log(this.list,'list');
    // },
    // getList(qq){
    //   this.aItem = qq.name
    //  this.list=qq.content
    // },
    // getList(aa) {
    //   if (aa === 0) {
    //     this.list = this.zc1list;
    //   } else if (aa === 1) {
    //     this.list = this.zc2list;
    //   } else if (aa === 2) {
    //     this.list = this.zc3list;
    //   } else if (aa === 3) {
    //     this.list = this.zc4list;
    //   }
    // },
    //  getList(a){
    //   if (a.name==='科技创新') {
    //     this.list=this.zc1list
    //   }
    //   if (a.name==='乡村振兴') {
    //     this.list=this.zc2list
    //   }
    //   if (a.name==='制造业转型') {
    //     this.list=this.zc3list
    //   }
    //   if (a.name==='文化产业') {
    //     this.list=this.zc4list
    //   }
    //  },

    // getlist(a, b) {
    //   this.aIndex = b;
    //   if (b === 0) {
    //     this.list = this.zc1list;
    //   } else if (b === 1) {
    //     this.list = this.zc2list;
    //   } else if (b === 2) {
    //     this.list = this.zc3list;
    //   } else if (b === 3) {
    //     this.list = this.zc4list;
    //   }
    // },

    // changeColor(a) {
    //   // this.aIndex = a;
    //   if (a === 0) {
    //     this.list = this.zc1list;
    //   } else if (a === 1) {
    //     this.list = this.zc2list;
    //   } else if (a === 2) {
    //     this.list = this.zc3list;
    //   } else if (a === 3) {
    //     this.list = this.zc4list;
    //   }
    // },

    // getlist(a){
    //   if (a.name=== '科技创新') {
    //     return this.zclist
    //   }
    //   if (a.name==='乡村振兴') {
    //     return this.zc1list
    //   }
    //   if (a.name==='制造业转型') {
    //     return this.zc2list
    //   }
    // },
    // getlist(a) {
    //   if (a === 0) {
    //     this.list = this.zc1list;
    //   } else if (a === 1) {
    //     this.list = this.zc2list;
    //   } else if (a === 2) {
    //     this.list = this.zc3list;
    //   }
    // },

    // getlist(a, b) {
    //   this.aIndex = b;
    //   if (a.name === "科技创新") {
    //     this.list = this.zc1list;
    //   }
    //   if (a.name === "乡村振兴") {
    //     this.list = this.zc2list;
    //   }
    //   if (a.name === "制造业转型") {
    //     this.list = this.zc3list;
    //   }
    // },
  },
};
</script>

<style scoped lang="scss">
.zcgzh {
  .zcgzh-a {
    background-image: url("../../assets/images/dididi.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 559px;
  }
  .zcgzh-b {
    margin: 0 12px 0 12px;
    background: #ffffff;
    // border: 1px solid red;
    height: 390px;
    margin-top: -105px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    display: flex;
    .zcgzh-g {
      border-top-left-radius: 14px;
      width: 90px;
      // border: 1px solid red;
      height: 100vh;
      .zcgzh-aa {
        height: 57px;
        border-bottom: 1px solid #f6f6f6;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        font-size: 16px;
        color: #000000;
        line-height: 57px;
        text-align: center;
        // &:nth-child(1) {
        //   border-top-left-radius: 14px;
        &:nth-child(1) {
          border-top-left-radius: 14px;
        }
      }
    }

    // .zcgzh-aa:nth-child(1){
    //   border-top-left-radius: 14px;
    // }
    // .zcgzh-aa:first-of-type{
    //   border-top-left-radius: 14px;
    // }
  }
  .zcgzh-aaa {
    background-color: red;
  }
  .zcgzh-aa.clicked {
    background: #eaf1f8;
  }
}
.zcgzh-d {
  border-top-right-radius: 14px;
  border-left: 1px solid #f6f6f6;
  flex: 1;
  .zcgzh-ddd {
    display: flex;
    margin: 17px 0 0 11px;
    height: 70px;
    border-bottom: 1px solid #f6f6f6;
    align-items: center;
    .zcgzh-dddd {
      height: 12px;
      width: 12px;
    }
    .zcgzh-dd {
      margin-left: 4px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
      line-height: 18px;
    }
  }
}
</style>
